<template>
  <div id="app" class="app">
    <div class="nav">
      <ul class="chapter">
        <li class="chapter-item" v-for="(chapter, index) in state.nav" :key="index">
          <a class="name">{{chapter.name}}</a>
          <ul class="children">
            <li
              v-for="(item, index) in chapter.children"
              :key="index"
              class="children-item"
              :class="{'active': state.activeNavId === item.id}"
              @click="handleClickNavItem(item.id)"
            >
              <router-link :to="`/examples/${item.id}`">{{item.name}}</router-link>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="content">
      <router-view/>
    </div>
  </div>
</template>

<script>
import config from '@/config';

export default {
  data() {
    return {
      state:{
        nav: config.nav,
        activeNavId: ''
      }
    }
  },
  mounted() {
    if (this.$route.params.examId) {
      this.state.activeNavId = this.$route.params.examId;
    }
  },
  methods: {
    /**
     * 点击Nav
     */
    handleClickNavItem(id) {
      this.state.activeNavId = id;
    }
  }
}
</script>

<style lang="less">
.app {
  display: flex;

  .nav {
    width: 300px;
    height: 100%;
    min-height: 100vh;
    max-height: 100vh;
    overflow: auto;
    border-right: 1px solid #e9e9e9;
    padding-top: 20px;
    background-color: #fbfbfb;

    .chapter {
      .chapter-item {
        .name {
          padding-left: 20px;
          display: block;
          height: 40px;
          line-height: 40px;
          width: 100%;
          color: #333;
          text-decoration: none;
          font-weight: bold;
        }
      }
    }

    .children {
      .children-item {
        height: 40px;
        line-height: 40px;
        padding-left: 30px;

        &.active, &:hover {
          background-color: #e9e9e9;
          cursor: pointer;
        }

        a {
          display: block;
          height: 100%;
          width: 100%;
          color: #333;
          text-decoration: none;
        }
      }
    }
  }

  .content {
    flex-grow: 1;
    padding: 20px;
  }
}
</style>
